<template>
  <div class="author">
    <el-row :gutter="10">
      <el-col :span="18">
        <div class="info panel">
          <el-col :span="4" class="info__avatar">
            <el-avatar :src="`${avatar}/${author.imgUrl}`" :size="100">
            </el-avatar>
          </el-col>
          <el-col :span="16" class="info__name">
            {{ author.name }}
          </el-col>
          <el-col v-if="user.hasUser" :span="4" class="info__attention">
            <el-button
              v-show="!author.attention"
              type="primary"
              icon="el-icon-plus"
              @click="handleAttention(1)"
            >
              关注
            </el-button>
            <el-button
              v-show="author.attention"
              icon="el-icon-minus"
              @click="handleAttention(-1)"
            >
              取消关注
            </el-button>
          </el-col>
        </div>
        <div class="main panel">
          <el-menu
            :default-active="activeIndex"
            class="main__menu"
            mode="horizontal"
            @select="handleMainSelect"
          >
            <el-menu-item index="1">
              动态
            </el-menu-item>
            <el-menu-item index="2">
              关注了
            </el-menu-item>
            <el-menu-item index="3">
              关注者
            </el-menu-item>
          </el-menu>
          <nuxt-child :id="id" keep-alive />
        </div>
      </el-col>
      <el-col :span="6" class="asideInfo">
        <el-row class="attentionNum panel">
          <el-col :span="12" class="follow">
            <nuxt-link :to="`/author/${id}/follow`">
              <el-row class="attentionNum__title">
                关注了
              </el-row>
              <el-row class="attentionNum__num">
                {{ author.follow }}
              </el-row>
            </nuxt-link>
          </el-col>
          <el-col :span="12" class="fans">
            <nuxt-link :to="`/author/${id}/fans`">
              <el-row class="attentionNum__title">
                关注者
              </el-row>
              <el-row class="attentionNum__num">
                {{ author.fans }}
              </el-row>
            </nuxt-link>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { AVATAR } from '@/assets/js/settings'
export default {
  name: 'Author',
  layout: 'full',
  validate({ route }) {
    if (route.path === '/author' || !/^\d+$/.test(route.params.id)) {
      return false
    }
    return true
  },
  middleware: ({ route, store, redirect }) => {
    if (store.state.user.id === Number(route.params.id)) {
      return redirect('/user/info')
    }
  },
  data() {
    return { activeIndex: '1' }
  },
  computed: {
    avatar() {
      return AVATAR
    },
    user() {
      return this.$store.state.user
    }
  },
  async asyncData({ route, app, store }) {
    const userId = store.state.user.id
    const id = Number(route.params.id)
    let author = {}
    const { status, data } = await app.$axios.get(`/author`, {
      params: { id, userId }
    })
    if (status === 200 && data.code === 1) {
      author = data.data
    }
    return { id, author }
  },
  created() {
    const path = this.$route.path.split('/').reverse()[0]
    switch (path) {
      case 'dyanmic':
        this.activeIndex = '1'
        break
      case 'follow':
        this.activeIndex = '2'
        break
      case 'fans':
        this.activeIndex = '3'
        break
      default:
        break
    }
  },
  methods: {
    async handleAttention(op) {
      const { status, data } = await this.$axios.post('user/attention', {
        id: this.id,
        userId: this.user.id,
        op
      })
      if (status === 200) {
        if (data.code === 0) {
          this.$message({
            message: op === -1 ? '取消关注成功' : '关注成功',
            type: 'success'
          })
          this.author.attention = !this.author.attention
        } else {
          this.$message({
            message: data.msg,
            type: 'error'
          })
        }
      }
    },
    handleMainSelect(index) {
      let url = ''
      switch (index) {
        case '1':
          url = 'dynamic'
          break
        case '2':
          url = 'follow'
          break
        case '3':
          url = 'fans'
          break
        default:
          break
      }
      this.$router.push(`/author/${this.id}/${url}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.author {
  margin: 0 auto;
  width: $--typeArea;
}
.panel {
  border-radius: 4px;
  background: #fff;
}
.info {
  margin-top: 10px;
  height: 150px;
  & > .el-col {
    height: 100%;
  }
}
.info__avatar {
  @include flexCenter();
}
.info__name {
  @include flexCenter($jc: flex-start);
  @include font(24px, 600);
}
.info__attention {
  @include flexCenter($jc: flex-end);
}
.main {
  margin: 10px 0px;
  padding: 0 20px;
  height: 72vh;
}
.asideInfo {
  margin-top: 10px;
}
.jump {
  cursor: pointer;
}
.attentionNum {
  padding: 16px 0px;
  height: 80px;
  & .el-col {
    height: 100%;
    @include flexCenter($fd: column);
  }
}
.follow {
  border-right: 1px solid #999;
}
.attentionNum__title {
  @include font(14px);
}
.attentionNum__num {
  @include font(16px, 600, $align: center);
  &:hover {
    color: $--color-primary;
    cursor: pointer;
  }
}
</style>
